<template>
  <div
    class="tab-wrapper"
    border-top-1px
  >
    <router-link
      to="/home"
      class="router-item"
      tag="div"
    >
      <div class="iconfont router-icon">&#xe619;</div>
      <div class="desc">借款</div>
    </router-link>

    <router-link
      to="/me"
      class="router-item"
      tag="div"
    >
      <div class="iconfont router-icon">&#xe6af;</div>
      <div class="desc">我的</div>
    </router-link>
  </div>
</template>

<script>
export default {
  name: 'ComponentTab'
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="stylus">
@import '~stylus/variable.styl'
@import '~stylus/mixins.styl'

.tab-wrapper
  width 100%
  touch-action none
  position fixed
  z-index 5
  bottom 0
  height 110px
  right 0
  left 0
  background-color $common_bgc
  display flex
  justify-content space-between
  box-sizing border-box

  .router-item
    flex 1
    height 100%
    display flex
    flex-direction column
    justify-content center
    align-items center
    color $tabBarColor_one

    &:active
      background-color $tab_touch

    .router-icon
      font-size $tabIconSize

    .desc
      font-size $common_fz
      ellipsis()

  .router-link-active
    color $tab_active
</style>
